<template>
  <div class="page2">
    <div
      v-for="(item, index) of newSystem"
      :key="index"
      class="userCenter"
      @mouseenter="changeColor(index)"
      @click="enterSystem(item.code)"
    >
      <h2 class="userWord">{{ item.title }}</h2>
      <div class="iconDiv">
        <svg-icon class="icons" :icon-class="item.icon" />
      </div>
      <div class="userInfo">
        <!-- <h4 v-show="item.title === '合作伙伴管理'">{{ item.head }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sp数量</h4> -->
        <h4 v-show="item.title !== '会员管理'">{{ item.head }}</h4>
        <div v-show="item.title !== '合作伙伴管理'" class="numbers">
          <h2 v-if="item.title !== '会员管理'" v-numscroll="item.info" />
          <h2 v-show="item.title === '用户管理'">&nbsp;人</h2>
          <h2 v-show="item.title === '用户管理'">&nbsp;个</h2>
          <h2 v-show="item.title === '账务管理'">&nbsp;元</h2>
          <h2 v-show="item.title === '系统设置'">&nbsp;个</h2>
          <h2 v-show="item.title === '数据监控'">&nbsp;条</h2>
        </div>
        <!-- <div v-show="item.title === '合作伙伴管理'" style="display:flex; justify-content: space-around">
          <div class="numbers">
            <h2 v-numscroll="item.info" />
            <h2>个</h2>
          </div>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <div class="numbers">
            <h2 v-numscroll="200" />
            <h2>个</h2>
          </div>
        </div> -->
        <!-- <span v-show="item.title === '用户管理'" style="font-size:15px">
          <div class="line" />
          本月新增用户数：{{ monPeople }}人</span> -->
      </div>
      <div class="footer">
        <div
          v-for="(val, num) of item.btns"
          :key="num"
          class="btn"
          :class="num < item.btns.length - 1 ? 'border' : ''"
          :style="{ width: (100 / item.btns.length) + '%' }"
          @click.stop="enterPart(val, item.code)"
        >{{ val.btnName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUser, getRole } from '@/utils/auth.js'
// import secret from '@/utils/secret.js'
import { getData, getUsers, getMonit } from '@/api/indexData.js'
import numscroll from '@/directive/numscroll/index.js'
export default {
  directives: {
    numscroll
  },
  data() {
    return {
      arr: [],
      status: null,
      newSystem: [],
      monPeople: 0
    }
  },
  computed: {
    ...mapGetters(['system', 'roles', 'token'])
  },
  mounted() {
    // 业务管理 && 账务中心 && 系统设置
    console.log(this.system)
    var code = this.system.map(power => {
      return power.code
    })
    var data = new Promise((resolve, reject) => {
      if (code.indexOf('business') > -1 || code.indexOf('accountcenter') > -1 || code.indexOf('setting') > -1) {
        getData().then(res => {
          this.system.forEach(item => {
            if (item.code === 'business') {
              item.info = res.data.currentProductNumber
            } else if (item.code === 'accountcenter') {
              item.info = res.data.thisMonthOrders
            } else if (item.code === 'setting') {
              item.info = res.data.currentOperatingAccountsNumber
            }
          })
          resolve(res)
        })
      } else {
        resolve()
      }
    })

    // 用户管理
    var users = new Promise((resolve, reject) => {
      if (code.indexOf('usercenter') > -1) {
        getUsers().then(user => {
          this.system.forEach(item => {
            if (item.code === 'usercenter') {
              item.info = user.data.usersNumber
            }
          })
          resolve(user)
        })
      } else {
        resolve()
      }
    })

    // 统计
    var monit = new Promise((resolve, reject) => {
      if (code.indexOf('datamonit') > -1) {
        getMonit().then(monit => {
          this.system.forEach(item => {
            if (item.code === 'datamonit') {
              item.info = monit.data.unusualNum
            }
          })
          resolve(monit)
        })
      } else {
        resolve()
      }
    })
    data.then(res => {
      console.log(1)
      console.log(res)
      users.then(item => {
        console.log(2)
        console.log(item)
        monit.then(val => {
          console.log(3)
          console.log(val)
          this.newSystem = this.system
        })
      })
    })
    /* getData().then(res => {
      getUsers().then(user => {
        getMonit().then(monit => {
          this.system.forEach(item => {
            this.monPeople = user.data.newUsersTheMonthNumber
            if (item.code === 'business') {
              item.info = res.data.currentProductNumber
            } else if (item.code === 'accountcenter') {
              item.info = res.data.thisMonthOrders
            } else if (item.code === 'setting') {
              item.info = res.data.currentOperatingAccountsNumber
            } else if (item.code === 'usercenter') {
              item.info = user.data.usersNumber
            } else if (item.code === 'datamonit') {
              item.info = monit.data.unusualNum
            }
            this.newSystem = this.system
          })
        })
      })
    }) */
  },
  methods: {
    changeColor: function(index) {
      this.status = index
    },
    enterSystem: function(code) {
      const token = encodeURI(this.token)
      // 进入用户管理
      console.log(code)
      // 进入用户管理
      if (code === 'usercenter') {
        window.location.href = `${window.bossUrl.API_USER}?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        console.log(window.bossUrl.API_USER)
      } else if (code === 'business') {
        // 业务管理
        console.log(window.bossUrl.API_BCBS)
        window.location.href = `${window.bossUrl.API_BCBS}?token=${token}&userName=${getUser()}&userRole=${getRole()}`
      } else if (code === 'setting') {
        // 进入系统设置
        console.log(window.bossUrl.API_SETTING)
        window.location.href = `${window.bossUrl.API_SETTING}?token=${token}&userName=${getUser()}&userRole=${getRole()}`
      } else if (code === 'datamonit') {
        // 进入监控
        console.log(window.bossUrl.API_MONIT)
        // console.log(window.bossUrl.monit)
        window.location.href = `${window.bossUrl.API_MONIT}dashboard/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
      } else if (code === 'integral') {
        // 进入AAA
        // console.log(window.bossUrl.monit)
        window.location.href = `${window.bossUrl.API_AAA}dashboard/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
      } else {
        this.$message({
          message: '新系统正在开发中，敬请期待！',
          type: 'success'
        })
      }
    },
    enterPart: function(val, code) {
      var codeUrl = val.btnCode + '/index'
      console.log(codeUrl)
      console.log(code)
      const token = encodeURI(this.token)
      if (code === 'usercenter') {
        if (codeUrl === 'search/index') {
          window.location.href = `${window.bossUrl.API_USER}${codeUrl}?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        } else if (codeUrl === 'point/index') {
          window.location.href = `${window.bossUrl.API_USER}pointChangeManager/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        } else if (codeUrl === 'vip/index') {
          window.location.href = `${window.bossUrl.API_USER}vipManage/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        }
      } else if (code === 'business') { // VUE_APP_BASE_BUSINESS
        if (codeUrl === 'product/index') {
          window.location.href = `${window.bossUrl.API_BCBS}${codeUrl}?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        } else if (codeUrl === 'tactics/index') {
          window.location.href = `${window.bossUrl.API_BCBS}expenses/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        } else if (codeUrl === 'accountTable/index') {
          window.location.href = `${window.bossUrl.API_BCBS}buy/buylist?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        }
      } else if (code === 'setting') {
        if (codeUrl === 'role/index') {
          window.location.href = `${window.bossUrl.API_SETTING}${codeUrl}?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        } else if (codeUrl === 'account/index') {
          window.location.href = `${window.bossUrl.API_SETTING}${codeUrl}?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        } else if (codeUrl === 'log/index') {
          window.location.href = `${window.bossUrl.API_SETTING}${codeUrl}?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        }
      } else if (code === 'integral') {
        // 进入AAA
        // console.log(window.bossUrl.monit)
        if (codeUrl === 'point/index') {
          window.location.href = `${window.bossUrl.API_AAA}point/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        }

        if (codeUrl === 'vip/index') {
          window.location.href = `${window.bossUrl.API_AAA}vipManage/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        }

        if (codeUrl === 'integralLogs/index') {
          window.location.href = `${window.bossUrl.API_AAA}river/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        }
      } else if (code === 'datamonit') {
        console.log(codeUrl)
        if (codeUrl === 'product/index') {
          window.location.href = `${window.bossUrl.API_MONIT}product/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        } else if (codeUrl === 'account/index') {
          window.location.href = `${window.bossUrl.API_MONIT}expenses/index?token=${token}&userName=${getUser()}&userRole=${getRole()}`
        }
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.line{
  color: #606266;
  border-bottom: 1px solid #bec2cc;
  border-radius: 50%;
  margin-top: 3px;
  margin-bottom: 10px;
}
.numbers{
  display: flex;
  margin-top: -10px;
}
.page2
  display: flex
  width: 100%
  height: 100%
  margin: 0 auto
  flex-wrap: wrap
  box-sizing: border-box !important
  .userCenter
    overflow: hidden
    width: 31%
    height: 44%
    margin: 15px 1%
    box-sizing: border-box !important
    box-shadow: 6px 6px 25px rgba(0,0,0,0.8)
    border-radius: 6px
    cursor: pointer
    background-position: center center !important
    background-size: 100%
    position: relative
    z-index: 100
    transition: all .4s ease-in-out
    .footer
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      height:60px
      background: rgba(0,0,0,0.5)
      border-bottom-left-radius: 6px
      border-bottom-right-radius: 6px
      z-index: 100
      display: flex
      justify-content: space-around
      align-items: center
      box-shadow: 6px 6px 10px rgba(0,0,0,0.8)
      overflow: hidden
      .btn
        text-shadow: 3px 3px 10px rgba(0, 0, 0, 1)
        text-align: center
        box-sizing: border-box
        position: relative
        color: #fff
        line-height: 60px
        height: 60px
        margin: 0
        font-size: 15px
        webkit-transition: all 150ms linear;
        -moz-transition: all 150ms linear;
        -o-transition: all 150ms linear;
        -ms-transition: all 150ms linear;
        transition: all 150ms linear
      .btn:hover
        background: rgba(0,0,0,0.45)
        text-shadow: none
    .userWord
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6)
      color: rgba(255,255,255,0.9)
      position: absolute
      top: 10%
      left: 7%
      font-size: 26px
      z-index: 10 !important
      opacity: 1 !important
    .userInfo
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6)
      position: absolute
      left: 42%
      top: 24%
      // max-height: 200px
      font-size: 20px
      color: rgba(255,255,255,0.9)
      z-index: 10
    .iconDiv
      width: 21%
      box-shadow: 6px 7px 5px rgba(0, 0, 0, 0.5)
      height: 34%
      top: 38%
      left: 7%
      position: absolute
      display: flex
      justify-content: center
      align-items: center
      z-index: 10
      border-radius: 50% !important
      border: 2px solid rgba(255, 255, 255, 0.7);
      opacity: 1 !important
      .icons
        font-size: 55px
</style>
<style>
.border{
  border-right: 1px solid rgba(234,234,234,0.6);
}
.userCenter:hover{
  box-shadow: 10px 10px 40px rgba(0,0,0,1) !important;
}
</style>
